<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 名片维护系统</title>
    <link rel="stylesheet" th:href="@{/css/profile.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="profile-container">
        <div class="profile-header">
            <div class="avatar-container">
                <div class="avatar">
                    <i class="fas fa-user-circle"></i>
                </div>
                <div class="user-meta">
                    <h1 th:text="${user.username}">用户名</h1>
                    <span class="user-role" th:text="${user.role}">角色</span>
                </div>
            </div>
            <a class="logout-btn" href="/user/logout">
                <i class="fas fa-sign-out-alt"></i> 退出登录
            </a>
        </div>

        <div class="profile-content">
            <div class="info-card">
                <h2><i class="fas fa-info-circle"></i> 基本信息</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <div class="info-label"><i class="fas fa-envelope"></i> 电子邮箱</div>
                        <div class="info-value" th:text="${user.email}">user@example.com</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label"><i class="fas fa-calendar-alt"></i> 注册时间</div>
                        <div class="info-value" th:text="${#dates.format(user.createTime, 'yyyy-MM-dd HH:mm:ss')}">2023-01-01</div>
                    </div>
                </div>
            </div>

            <div class="action-card">
                <h2><i class="fas fa-cog"></i> 账户操作</h2>
                <div class="action-buttons">
                    <a class="action-btn primary" href="/user/change-password">
                        <i class="fas fa-key"></i> 修改密码
                    </a>
                    <a class="action-btn" href="/user/businesscard">
                        <i class="fas fa-address-book"></i> 我的名片
                    </a>
                    <a class="action-btn secondary" href="/">
                        <i class="fas fa-home"></i> 返回首页
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
